<template>
  <div class="flex juzhong1">
    <div>
      <div>
        <n-input-group>
          <n-input :style="{ width: '66%' }" v-model:value="leftinputtext" placeholder="请输入关键字"/>
          <n-select :style="{ width: '33%' }" v-model:value="leftselectkey" :options="leftoptions"/>
          <n-button type="info">重置</n-button>
        </n-input-group>
      </div>
      <n-data-table
          class="min-h-240px"
          :columns="columnleft"
          :data="leftalllist"
          :row-key="row => row[props.bondkey]"
          @update:checked-row-keys="handleleftCheck"
          v-model:checked-row-keys="leftlist"
      />
      <div>{{ errorMsg }}</div>
    </div>
    <div class="juzhong1 flex-col">
      <n-button :disabled="rightbtn" class="m-1" @click="moveleft" type="info">{{ "<<" }}</n-button>
      <n-button :disabled="leftbtn" class="m-1" @click="moveright" type="info">{{ ">>" }}</n-button>
    </div>
    <div>
      <div>
        <n-input-group>
          <n-input :style="{ width: '66%' }" v-model:value="rightinputtext" placeholder="请输入关键字"/>
          <n-select :style="{ width: '33%' }" v-model:value="rightselectkey" :options="rightoptions"/>
          <n-button type="info">重置</n-button>
        </n-input-group>
      </div>
      <n-data-table
          class="min-h-240px"
          :columns="colnumright"
          :data="rightalllist"
          :row-key="row => row[props.bondkey]"
          @update:checked-row-keys="handlerightCheck"
          v-model:checked-row-keys="rightlist"
      />
    </div>
  </div>
</template>

<script setup name="transfer" lang='ts'>
import {useRoute, useRouter} from "vue-router";
import {defineProps} from "vue";

const router = useRouter()
const route = useRoute()
const props = defineProps({
  // 右边的字段
  colnumright: {
    type: Array,
    default: [],
  },
  // 左边的字典
  colnumleft: {
    type: Array,
    default: [],
  },
  // 默认的字段
  colnum: {
    type: Array,
    default: [],
  },
  // 备选的数据
  origindata: {
    type: Array,
  },
  // 被选中的数据
  default: {
    type: Array,
    default: [],
  },
  // 识别的唯一键
  bondkey: {
    type: String,
    default: 'id',
  },
  // 必填
  required: {
    type: Boolean,
    default: false,
  },
  // 最大数量
  max: {
    type: Number,
    default: 0,
  },
})
// 错误
const errorMsg = ref("")
// 字段
const columnleft = computed(() => {
  const ziduanlist = props.colnumleft.length > 0 ? props.colnumleft : props.colnum
  const check = ziduanlist.find(el => el.type === "selection")
  if (!check) {
    return [{
      type: 'selection', width: 60, disabled(row, index) {
        return row.checkbox === undefined || row.checkbox === null ? true : !!row.checked
      },
    }, ...ziduanlist]
  } else {
    return ziduanlist
  }
})
const colnumright = computed(() => {
  const ziduanlist = props.colnumright.length > 0 ? props.colnumright : props.colnum
  const check = ziduanlist.find(el => el.type === "selection")
  if (!check) {
    return [{
      type: 'selection', width: 60, disabled(row, index) {
        return row.checkbox === undefined || row.checkbox === null ? true : !!row.checked
      },
    }, ...ziduanlist]
  } else {
    return ziduanlist
  }
})
const leftoptions = computed(() => {
  let oldlist = []
  if (props.colnumleft.length > 0) {
    oldlist = props.colnumleft
  } else {
    oldlist = props.colnum
  }
  return oldlist.filter((item) => {
    return item.type !== "selection" && item.key
  }).map(item => {
    return {label: item.title, value: item.key,}
  })
})
const rightoptions = computed(() => {
  let oldlist = []
  if (props.colnumleft.length > 0) {
    oldlist = props.colnumleft
  } else {
    oldlist = props.colnum
  }
  return oldlist.filter((item) => {
    return item.type !== "selection" && item.key
  }).map(item => {
    return {label: item.title, value: item.key,}
  })
})
// 左边的数据
const leftinputtext = ref("")   // 手动输入的过滤关键字
const leftselectkey = ref("")   // 过滤的key
const resultlist = ref([])      // 所有左侧的数据
const leftalllist = computed(() => {  // 显示左侧的数据
  if (leftinputtext.value && leftselectkey.value) {
    return resultlist.value.filter(item => {
      return item[leftselectkey.value] && item[leftselectkey.value].indexOf(leftinputtext.value) > -1
    })
  } else {
    return resultlist.value
  }
})
const leftlist = ref([])    // 左侧被选中的数据
const leftbtn = computed(() => {  // 向右移动的按钮
  return leftlist.value.length === 0
})

// 右边数据
const rightinputtext = ref("")    // 右侧过滤的关键字
const rightselectkey = ref("")    // 右侧过滤的key
const rightalllist = computed(() => {   // 右侧显示的数据
  // 先过滤已经移到左边的
  const linshilist = props.origindata.filter(item => {
    const jieguo = resultlist.value.find(el => el[props.bondkey] === item[props.bondkey])
    return !jieguo
  })
  // 再过滤关键字
  if (rightinputtext.value && rightselectkey.value) {
    return linshilist.filter(item => {
      return item[rightselectkey.value] && item[rightselectkey.value].indexOf(rightinputtext.value) > -1
    })
  } else {
    return linshilist
  }
})
const rightlist = ref([])   // 右侧被选中的数据
const rightbtn = computed(() => {   // 向左移动的按钮
  return rightlist.value.length === 0
})
// 选择回调
const handleleftCheck = (selectlist) => {
  console.log(selectlist)
  leftlist.value = selectlist
}
const handlerightCheck = (selectlist) => {
  console.log(selectlist)
  rightlist.value = selectlist
}

// 点击向左移动
const moveleft = () => {
  rightlist.value.forEach(item => {
    if(props.max){
      if(resultlist.value.length < props.max){
        const obj = props.origindata.find(el => el[props.bondkey] === item)
        console.log("找到了，", obj)
        if (obj) {
          resultlist.value.push(obj)
        }
      }
    }else{
      const obj = props.origindata.find(el => el[props.bondkey] === item)
      console.log("找到了，", obj)
      if (obj) {
        resultlist.value.push(obj)
      }
    }
  })
  // leftlist.value = []
  rightlist.value = []
}
// 点击向右移动
const moveright = () => {
  resultlist.value = resultlist.value.filter(item => {
    return !leftlist.value.includes(item[props.bondkey])
  })
  leftlist.value = []
  // rightlist.value = []
}

// 校验回调
const jiaoyan = (funcitem) => {
  if (props.required) {
    if (resultlist.value.length > 0) {
      funcitem(resultlist.value)
    } else {
      errorMsg.value = "最少选择一条数据"
    }
  } else {
    funcitem(resultlist.value)
  }
}
// 重置
const reset = () => {
  resultlist.value = []
}
// 生命周期区域
onMounted(()=>{
  rightselectkey.value = rightoptions.value[0].value
  leftselectkey.value = leftoptions.value[0].value
})

defineExpose({jiaoyan, reset})
</script>

<style scoped>

</style>
